<template>
	<view>
		<!-- :style="{ paddingTop: statusHeight + 'px' }" -->
		<view class="sign-bg" v-if="!isfrist">
			<view>
				<image src="../../static/img/logo_2.png"></image>
			</view>
		</view>
		<view class="sign-fillp" v-if="!isfrist">
			<view class="sign-fillc">
				<view class="f-l">
					<view class="fl-t">用户登录</view>
				</view>
				<view class="info-column">
					<view class="info-icon">
						<image src="../../static/img/sign-info-01.png"></image>
					</view>
					<view class="info-title">账户</view>
					<view class="info-operate">
						<input type="text" placeholder="请输入账户名称" v-model="username">
					</view>
				</view>
				<view class="info-column">
					<view class="info-icon">
						<image src="../../static/img/sign-info-02.png"></image>
					</view>
					<view class="info-title">密码</view>
					<view class="info-operate">
						<input type="password" placeholder="请输入密码" v-model="password">
					</view>
				</view>
				<view class="reg" @click="register">注册</view>
				<view class="loginp">
					<view class="login-btn" @click="handleLogin()">登录</view>
					<view class="login-help" @click="jumpForgot()">忘记密码？</view>
				</view>
			</view>
		</view>
		<Open v-if="isfrist" @setFrist="setFrist()"></Open>
	</view>
</template>

<script>
	import {
		userLogin
	} from "@/common/js/index.js"
	import Open from '@/pages/inlet/open.vue'
	export default {
		components: {
			Open
		},
		data() {
			return {
				statusHeight: '',
				username: '',
				password: '',
				isfrist: uni.getStorageSync('isFirstLaunch') || true,
			}
		},
		onLoad() {
			// this.getSysteminfo()
			if (uni.getStorageSync("token")) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
			uni.setStorageSync("num", '69');
			uni.setStorageSync("end", 'be');
			uni.setStorageSync("code", '7ed3');
		},
		onShow() {
			console.log(uni.getStorageSync('isFirstLaunch'));
			if(uni.getStorageSync('isFirstLaunch') ===false) {
				this.isfrist = uni.getStorageSync('isFirstLaunch')
			}else if(uni.getStorageSync('isFirstLaunch') ===true) {
				this.isfrist = uni.getStorageSync('isFirstLaunch')
			}
		},
		methods: {
			setFrist() {
				uni.setStorageSync('isFirstLaunch', false);
				this.isfrist = false
			},
			handleLogin() {
				userLogin({
					user_name: this.username,
					user_pwd: this.password
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.setStorageSync("token", res.data.token);
						uni.switchTab({
							url: '/pages/index/index'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						})
					}
					this.username = ""
					this.password = ""
				})
				// if(!this.userForm.userName) {
				// 	uni.showToast({ title: '请输入账号名称', icon: 'none' })
				// 	return
				// }

				// if(!this.userForm.password) {
				// 	uni.showToast({ title: '请输入密码', icon: 'none' })
				// 	return
				// }
			},
			jumpForgot() {
				uni.navigateTo({
					url: '/pages/inlet/forgotPsd'
				})
			},
			register() {
				uni.navigateTo({
					url: '/pages/inlet/register'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.sign-bg {
		min-height: 420rpx;
		padding-top: 88rpx;
		background: url('../../static/img/sign-bg.png') no-repeat;
		background-size: 100%;
		overflow: hidden;
		box-sizing: border-box;

		view {
			width: max-content;
			margin: 0 auto;
			margin-top: 72rpx;

			// padding-top: 60rpx;
			image {
				width: 388rpx;
				height: 128rpx;
			}
		}
	}

	.sign-fillp {
		// padding: 0 30rpx;
		position: relative;

		// height: 1170rpx;
		.sign-fillc {
			position: absolute;
			top: -80rpx;
			left: 50%;
			height: 1170rpx;
			width: 92%;
			padding: 40rpx 30rpx;
			transform: translateX(-50%);
			background: #fff;
			border-radius: 12rpx;
			box-sizing: border-box;

			.f-l {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.fl-t {
					color: #FF524F;
					font-size: 36rpx;
					font-weight: 500;
				}

				.fl-r {
					color: #3D3D3D;
					font-size: 24rpx;

					text {
						color: #FF524F;
					}
				}
			}

			.info-column {
				display: flex;
				align-items: center;
				height: 118rpx;
				border-bottom: 2rpx solid #eee;
				box-sizing: border-box;

				.info-icon {
					image {
						width: 48rpx;
						height: 48rpx;
						display: block;
					}
				}

				.info-title {
					padding: 0 20rpx;
					font-size: 28rpx;
					color: #333;
				}

				.info-operate {
					flex: 1;
					text-align: right;

					input {
						font-size: 26rpx;
					}
				}
			}

			.loginp {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 80rpx;
				margin-top: 100rpx;

				.login-btn {
					width: 100%;
					line-height: 80rpx;
					background: linear-gradient(270deg, #FF5F3B 0%, #FF524F 100%);
					border-radius: 40rpx;
					text-align: center;
					color: #fff;
					font-size: 32rpx;
				}

				.login-help {
					margin-top: 30rpx;
					color: #FF524F;
					font-size: 28rpx;
				}
			}
		}
	}

	.reg {
		text-align: right;
		color: #FF524F;
		margin-top: 16rpx;
	}
</style>